<template>
  <div class="box">
    <div class="seach">
      <el-row :gutter="20" style="display:flex">
        <el-col :span="7" style="min-width:462px">
          <span class="lable">监测时间</span>
          <span class="label_input">
            <el-date-picker
              v-model="carInfo.applyTime"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </span>
        </el-col>
        <el-col :span="5" style="min-width:399px">
          <span class="lable">用户ID</span>
          <span class="label_input">
            <el-input v-model="carInfo.userId" placeholder="请输入内容" />
          </span>
        </el-col>
        <el-col :span="5" style="min-width:330px">
          <span class="lable">状态</span>
          <span class="label_input">
            <el-select v-model="carInfo.status" placeholder="请选择" clearable>
              <el-option
                v-for="item in carInfo.statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </span>
        </el-col>

        <el-col :span="2" style="min-width:130px">
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-col>
      </el-row>

      <el-row :gutter="10" style="margin-top:30px;display:flex">
        <el-col :span="5" style="min-width:399px">
          <span class="lable">文本内容</span>
          <span class="label_input">
            <el-input v-model="carInfo.payText" placeholder="请输入搜索内容" />
          </span>
        </el-col>
        <el-col :span="2" style="min-width:130px">
          <el-button type="primary" @click="goto('未知文本转换')">未知文本转换</el-button>
          <el-button type="primary" @click="goto('预警通知')">预警通知</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%;margin-top:30px"
      border
    >
      <el-table-column type="index" width="50" label="序号" align="center" />
      <el-table-column
        v-for="item in params"
        :key="item.code"
        :label="item.text"
        align="center"
      >
        <template slot-scope="scope">

          <span>
            {{ scope.row[item.paramsCode] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column width="200" label="操作" align="center">
        <template slot-scope="scope">
          <p
            style="cursor: pointer;color:#409EFF"
            @click="operation('标记动态内容')"
          >标记动态内容</p>
          <p
            style="cursor: pointer;color:#409EFF"
            @click="operation('替换文本编辑')"
          >替换文本编辑</p>
          <p
            style="cursor: pointer;color:#409EFF"
            @click="operation('清重')"
          >清重</p>

        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pagination.total > 0"
      :total="pagination.total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="inquire"
    />
    <el-dialog
      title="标记动态内容"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      center
    >
      <p style="line-height:70px;font-weight:600">异常文本内容</p>
      <p>进件传入的身份证号420105198210201223与ocr识别出来的420105198210201233不一致</p>
      <p style="line-height:70px;font-weight:600">标记内容</p>
      <p v-for="(iconItem,idx) in inputlist" :key="idx" style="display:flex;align-items: center;width:100%;margin-top:20px">
        <span class="first_span">{{ idx+1 }}.</span>
        <span class="dia_input">
          <el-input v-model="iconItem.value" placeholder="请输入内容" />
        </span>
        <span class="last_span">
          <i class="el-icon-remove-outline" @click="iconMethods('del',idx)" />
          <i class="el-icon-circle-plus" @click="iconMethods('add',idx)" />

        </span>
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">保存</el-button>

      </span>
    </el-dialog>
    <el-dialog
      title="替换文本"
      :visible.sync="replacedialog"
      width="30%"
      :before-close="handleClose"
      center
    >
      <p style="line-height:70px;font-weight:600">异常文本内容</p>
      <p>进件传入的身份证号420105198210201223与ocr识别出来的420105198210201233不一致</p>
      <p style="line-height:70px;font-weight:600">转换后内容
        <span>转换内容需包含动态参数</span>
      </p>
      <p>
        <el-input
          v-model="textarea"
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
        />
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="replacedialog = false">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      loading: false,
      carInfo: {
        userId: '', // 用户ID
        applyTime: '', // 监测时间
        status: '', // 状态
        statusOptions: [
          {
            value: '0',
            label: '银联智策'
          },
          {
            value: '1',
            label: 'PING＋＋'
          }
        ],
        payText: ''
      },
      pagination: {
        pageSize: 20,
        pageNum: 1,
        total: 0
      },
      tableData: [{}],
      params: [
        {
          paramsCode: 'carSourceNo',
          text: '首次监测时间'
        },
        {
          paramsCode: 'outTime',
          text: '用户ID'
        },

        {
          paramsCode: 'userId',
          text: '业务类型'
        },
        {
          paramsCode: 'brandModel',
          text: '涉及流程'
        },
        {
          paramsCode: 'amount',
          text: '第三方名称'
        },
        {
          paramsCode: 'vin',
          text: '异常文本内容'
        },
        {
          paramsCode: 'childrenStatus',
          text: '替换文本内容'
        }
      ],
      dialogVisible: false,
      replacedialog: false,
      inputlist: [{
        value: ''
      }],
      textarea: ''
    }
  },
  created() {

  },
  methods: {
    save(text) {
    },
    iconMethods(text, index) {
      if (text === 'del') {
        if (this.inputlist.length === 1) {
          this.$message({
            message: '至少保留一条',
            type: 'warning'
          })
          return
        }
        this.inputlist.splice(index, 1)
      } else if (text === 'add') {
        this.inputlist.push({
          value: ''
        })
        console.log(this.inputlist)
      }
    },
    handleClose(done) {
      done()
    },
    reset() {

    },
    search() {

    },
    inquire() {

    },
    operation(text) {
      if (text === '标记动态内容') {
        this.dialogVisible = true
        console.log(text)
      } else if (text === '替换文本编辑') {
        console.log(text)
        this.replacedialog = true
      } else if (text === '清重') {
        this.$alert('清除了  10 条记录', {
          confirmButtonText: '保存'
        })
      }
    },
    goto(text) {
      if (text === '未知文本转换') {
        this.$router.push('/partyText/unknow')
        console.log(text)
      } else if (text === '预警通知') {
        this.$router.push('/partyText/early')

        console.log(text)
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.box /deep/ {
  padding: 20px;
  margin: 20px;
  .first_span{
    width: 50px;
  }
  .last_span{
    margin-left: 20px;
    i{
      font-size: 20px;
    }
  }
  .dia_input{
    width: 70%;
  }
  .el-range-separator {
    width: 7%;
  }
  .top {
    margin-bottom: 30px;
    .carStatue {
      margin-top: 20px;
    }
  }
  .seach {
    .el-col {
      display: flex;
      align-items: center;
      .lable {
        // min-width: 100px;
        margin-right: 20px;
      }
      .label_input {
        // min-width: 300px;
      }
    }
  }
}
</style>
